<template>
    <div id="view_anonymousUser" class="home-page-contianer">
        <div class="banner-alert">
            <div style="position: relative; width: 100%">
                <span
                    class="text d-phone-none"
                    v-if="store.session.user_mgmt.user_type_status.anonymous === true">
                    匿名用户已启用
                </span>
                <span
                    class="text"
                    style="color: orangered"
                    v-if="store.session.user_mgmt.user_type_status.anonymous === false">
                    匿名用户已禁用
                </span>
            </div>

            <span
                style="color: red"
                v-if="typeof store.session.user_mgmt.user_type_status.anonymous === 'string'">
                错误:{{ store.session.user_mgmt.user_type_status.anonymous }}
            </span>
        </div>
        <n-tabs
            type="line"
            class="home-page-tabs"
            animated
            :value="compControl.tab_control.activeName"
            :on-before-leave="compControl.tab_control.handleSwitchPane">
            <template #prefix>
                <div
                    style="
                        user-select: none;
                        font-weight: bold;
                        font-size: 1rem;
                        height: 100%;
                        display: inline-flex;
                        align-items: center;
                        padding: 0 1rem;
                    ">
                    匿名用户
                </div>
            </template>
            <n-tab-pane name="right" tab="权限管理">
                <v_right />
            </n-tab-pane>
            <n-tab-pane name="quick" tab="快速设置">
                <v_quickSetup />
            </n-tab-pane>
            <n-tab-pane name="log" tab="用户记录">
                <v_access />
            </n-tab-pane>
        </n-tabs>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import v_right from './v_right.vue'
import v_quickSetup from './v_quickSetup.vue'
import v_access from './v_access.vue'
import { axg_getUserTypeStatus } from '@/utils/interface/User'
import { useMainStore } from '@/utils/store'
const store = useMainStore()
const compControl = reactive({
    tab_control: {
        activeName: 'right',
        handleSwitchPane(name: string, _oldname: string) {
            if (name == '') {
            } else if (name == '') {
            } else if (name == 'log') {
            }
            compControl.tab_control.activeName = name
        }
    }
})

onMounted(() => {
    compControl.tab_control.handleSwitchPane(compControl.tab_control.activeName, '')
    store.session.user_mgmt.user_type_status.handleUpdateUserTypeStatus('anonymous')
})
</script>

<style lang="scss" scoped>
@use '@/components/framework/framework';
#view_anonymousUser {
    $height: calc(framework.$framework_content_height);
    padding-bottom: 1em;

    min-height: $height;
    box-sizing: border-box;

    .banner-alert {
        padding-left: 0.5rem;
        white-space: nowrap;
        .text {
            color: green;
            position: absolute;
            right: 0.75rem;
            margin-top: 0.5rem;
        }
    }
}
</style>
